<template>
	<view class="content">
		<view class="status_bar"></view>
		<Head :webtext="webtext"></Head>
		<view class="body">
			<u-form class="form" ref="uForm" label-position="top" :label-style="labelStyle">
				<u-form-item label="原密码">
					<u-input
						class="input"
						:password-icon="false"
						:clearable="false"
						v-model="old_funds_pass"
						placeholder="原密码,第一次设置不用输入"
						type="password"
						placeholder-style="fontSize: 20upx"
					/>
				</u-form-item>
				<u-form-item label="新密码">
					<u-input
						class="input"
						:password-icon="false"
						:clearable="false"
						v-model="funds_pass"
						placeholder="请输入你的新密码"
						type="password"
						placeholder-style="fontSize: 20upx"
					/>
				</u-form-item>
				<view class="button" @click="submit">确定</view>
			</u-form>
			<u-toast ref="uToast" :icon="false" />
		</view>
	</view>
</template>

<script>
import Head from '../../components/head.vue';
export default {
	components: {
		Head
	},
	data() {
		return {
			webtext: '设置资金密码',
			old_funds_pass: '',
			funds_pass: '',
			labelStyle: {
				color: '#fff',
				fontSize: '34upx',
				lineHeight: '42upx'
			}
		};
	},
	methods: {
		submit() {
			if (this.funds_pass) {
					this.$u.api.securitypassword({
							old_funds_pass: this.old_funds_pass,
							funds_pass: this.funds_pass
						})
						.then(res => {
							uni.showToast({
								title: res.msg,
								duration: 1000,
								icon: 'none'
							});
						});
			} else {
				uni.showToast({
					title: '请填写信息',
					duration: 1000,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.form {
	padding: 20upx 80upx;
	text-indent: 10upx;
}
.input {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		right: 20upx;
		top: calc(50% - 16upx);
		background: url(../../static/static/password_icon.png) no-repeat center;
		width: 32upx;
		height: 32upx;
		background-size: contain;
	}
}
.button {
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	border-radius: 60upx;
	margin: 60upx auto 40upx;
	display: block !important;
	color: #fff;
	margin-top: 60upx;
	background-color: #0ea2ff;
}
/deep/.uni-input-input {
	color: #fff;
}
</style>
